<template>
  <image class="top_bg_image" :src="this.currentBgImg" mode="scaleToFill" />
  <view class="top_view">

    <!-- <view class="top_bg_view" /> -->
    <!-- <image class="top_bg_image" src="../../static/typebg.png" mode="scaleToFill" /> -->
    <view class="top_tools">
      <image class="top_positionimg" src="../../static/position.png" mode="aspectFit"></image>
      <text class="top_address">广州</text>
      <image class="top_arrow_down" src="../../static/arrow_down_white.png" mode="aspectFit"></image>
      <view class="top_search">
        <image class="top_search_img" src="../../static/search.png" mode="aspectFit"></image>
        <input class="top_search_input" type="text" placeholder="找明星、演出、场馆" placeholder-style="color:#fff">
      </view>
    </view>

    <view class="grid_view">
      <view class="grid_item" :class="{select_grid:current==index}" v-for="(item,index) in items" :key="index"
        @click="click_grid(index)">
        {{item}}
        <view :class="{grid_line:current==index}" />
      </view>
    </view>

    <view class="top_border_view" />
  </view>

  <view class="btn_view">

    <button class="left_btn" type="default" size="mini">
      风格
      <image style="width: 10px; height: 10px;margin-left: 5px;" src="/static/arrow_down.png" mode="aspectFit"></image>
    </button>

    <button class="left_btn " type="default" size="mini">
      时间
      <image style="width: 10px; height: 10px;margin-left:5px;" src="/static/arrow_down.png" mode="aspectFit"></image>
    </button>

    <button class="right_btn" type="default" size="mini">
      综合排序
      <image style="width: 10px; height: 12px;margin-left:5px;" src="/static/arrow_down.png" mode="aspectFit"></image>
    </button>
  </view>

  <recommend v-for="(item,index) in recommend" :item="item"></recommend>

  <view style="width: 100%;height: 30px;">

  </view>

</template>

<script>
  import recommend from "/component/recommend.vue"
  export default {
    components: {
      recommend
    },
    data() {
      return {
        items: ['演唱会', '音乐节', '剧场演出', '体育赛事', '景区展会'],
        bgImgs: [
          '../../static/type/ychbg.png',
          '../../static/type/yyjbg.png',
          '../../static/type/jcycbg.png',
          '../../static/type/tyssbg.png',
          '../../static/type/jqzhbg.png',
        ],
        recommend: [{
          src: "/static/material/m5.png",
          title: '薛之谦2023中国巡演-广州站薛之谦2023中国巡演',
          address: '广州· 正佳广场',
          time: '2023.09.13 周日 18:00',
          tyle: '#演唱会',
          money: 99,
        }, {
          src: "/static/material/m4.png",
          title: '薛之谦2023中国巡演-广州站薛之谦2023中国巡演',
          address: '广州· 正佳广场',
          time: '2023.09.13 周日 18:00',
          tyle: '#演唱会',
          money: 99,
        }, {
          src: "/static/material/m3.png",
          title: '薛之谦2023中国巡演-广州站薛之谦2023中国巡演',
          address: '广州· 正佳广场',
          time: '2023.09.13 周日 18:00',
          tyle: '#演唱会',
          money: 99,
        }, {
          src: "/static/material/m2.png",
          title: '薛之谦2023中国巡演-广州站薛之谦2023中国巡演',
          address: '广州· 正佳广场',
          time: '2023.09.13 周日 18:00',
          tyle: '#演唱会',
          money: 99,
        }],
        current: 0,
        currentBgImg: '/static/type/ychbg.png',
        search: "",
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 1000
      }
    },
    methods: {
      click_grid(index) {
        if (this.current != index)
          this.current = index
        this.currentBgImg = this.bgImgs[index]
      }
    }
  }
</script>

<style scoped lang="scss">
  .top_bg_image {
    width: 100%;
    height: 175px;
    display: block;
  }

  .top_view {
    width: 100%;
    height: 175px;
    margin-top: -175px;
    position: relative;
    ;

    .top_bg_view {
      width: 100%;
      height: 175px;
    }


    .top_tools {
      width: 100%;
      height: 32px;
      padding-top: 40px;

      .top_positionimg {
        float: left;
        width: 20px;
        height: 32px;
        margin-left: 20px;
      }

      .top_address {
        margin-left: 5px;
        float: left;
        width: 35px;
        height: 17px;
        line-height: 32px;
        font-family: PingFang SC, PingFang SC-600;
        font-weight: 600;
        font-size: 12px;
        color: white;
      }

      .top_arrow_down {
        float: left;
        width: 10px;
        height: 32px;
        margin-left: 5px;
      }

      .top_search {
        width: 200px;
        height: 32px;
        border-radius: 16px;
        background-color: rgba(0, 0, 0, 0.2);
        float: left;
        margin: 0 auto;
        margin-left: 10px;
        padding: 0;
        display: flex;
        align-items: center;

        .top_search_img {
          width: 14px;
          height: 14px;
          margin-left: 10px;
        }

        .top_search_input {
          font-size: 12px;
          margin: 0px 10px;
          color: white;
        }
      }
    }

    .grid_view {
      width: 90%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      margin: 10px 5% 10px 5%;
      color: white;

      .grid_item {
        width: 25%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        z-index: 1;
        color: w;

        .grid_line {
          width: 20px;
          height: 4px;
          border-radius: 2px;
          background-color: #FD5359;
          margin-left: 50%;
          transform: translate(-50%, 0);
        }
      }

      .select_grid {
        color: #FD5359;
      }
    }

    .top_border_view {
      width: 100%;
      background: #F8F8F8;
      height: 20px;
      border-top-left-radius: 40px;
      border-top-right-radius: 40px;
      position: absolute;
      bottom: 0;
    }
  }

  .btn_view {
    width: 90%;
    height: 30px;
    margin: 10px 5%;
    padding: 0;

    .left_btn {
      float: left;
      margin-right: 20px;
      overflow: visible;
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-400;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
    }

    .right_btn {
      float: right;
      overflow: visible;
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-400;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
    }
  }
</style>